
<script setup>
import {reactive, ref,getCurrentInstance} from 'vue'
import { useAllDataStore } from '@/stores/indes.js';
import {useRoute,useRouter} from "vue-router";
const loginForm = reactive({
  username:'',
  password:'',
})
const store = useAllDataStore()
const  {proxy} = getCurrentInstance()
const router = useRouter();
const  handleLogin = async ()=>{
  const res = await proxy.$api.getMenu(loginForm);
  store.updateMenuList(res.menuList);
  store.state.token = res .token
  store.addMenu(router);
  router.push('/home')

}
</script>
<template>
  <div class="body-login">
    <el-form  class="login-container"  :model="loginForm"  >
      <el-form-item>
        <h1>登录</h1>
      </el-form-item>
      <el-form-item prop="userName">
        <el-input type="input" placeholder="请输入用户名" v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input  type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
<!--      <el-form-item class="flex">-->
<!--        <div class="flex">-->
<!--          <el-checkbox>记住我</el-checkbox>-->
<!--          <el-link type="primary" :underline="false">忘记密码？</el-link>-->
<!--        </div>-->
<!--      </el-form-item>-->
      <!-- 登录按钮 -->
      <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="handleLogin">登录</el-button>
      </el-form-item>
<!--      <el-form-item class="flex">-->
<!--        <el-link type="info" :underline="false" @click="isRegister = true;clearRegisterData()">-->
<!--          注册 →-->
<!--        </el-link>-->
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>
<style lang="less" scoped>
//自定义菜单样式
.body-login{
  width:100%;
  height:100%;
  background-image:url("../assets/images/background.png");
  background-size:100%;
  overflow:hidden;
}
.login-container{
  width:400px;
  background-color:#fff;
  border:1px solid #eaeaea;
  border-radius:15px;
  padding:35px 35px 15px 35px;
  box-shadow:0 0 25px #cacaca;
  margin:250px auto;
  h1{
    text-align:center;
    margin-bottom:20px;
    color:#505450;
  }
  :deep(.el-form-item__content){
    justify-content:center;
  }
}
</style>
